<template>
  <div>
    <basic-dialog :visible="visible" min-width="626px"
                  title="串口配置">
      <q-form @submit="onSubmit"
              greedy
              @reset="onReset"
              ref="myForm"
              class="dialog-content block">
        <div style="padding: 20px 20px 0 20px">
          <div class="row">
            <div class="col">
              <q-input v-model="form.address"
                       dense
                       emit-value
                       map-options
                       style="width: 286px"
                       :rules="[
                       val => val !== '' || '请输入设备地址']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>设备地址:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="col">
              <q-select v-model="form.volatility"
                        :options="volatilityOptions"
                        dense
                        options-dense
                        emit-value
                        map-options
                        style="width: 286px"
                        outlined
                        :rules="[ val => val !== '' || ' 请选择设备波动率']">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span><span>设备波动率:</span>
                  </label>
                </template>
              </q-select>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <q-select v-model="form.dataBit"
                        :options="dataBitOptions"
                        dense
                        options-dense
                        emit-value
                        map-options
                        style="width: 286px"
                        outlined
                        :rules="[ val => val !== '' || ' 请选择数据位长度']">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span><span>数据位长度:</span>
                  </label>
                </template>
              </q-select>
            </div>
            <div class="col-6">
              <q-select v-model="form.stopBit"
                        :options="stopBitOptions"
                        dense
                        options-dense
                        emit-value
                        map-options
                        outlined
                        style="width: 286px"
                        :rules="[ val => val !== '' || ' 请选择停止位长度']">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span><span>停止位长度:</span>
                  </label>
                </template>
              </q-select>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <q-select v-model="form.checkBit"
                        :options="checkBitSOptions"
                        dense
                        options-dense
                        emit-value
                        map-options
                        style="width: 286px"
                        outlined
                        :rules="[ val => val !== '' || ' 请选择校验位长度']">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span><span>校验位长度:</span>
                  </label>
                </template>
              </q-select>
            </div>
            <div class="col-6">
              <q-select v-model="form.collectionCycle"
                        :options="collectionCycleOptions"
                        dense
                        options-dense
                        emit-value
                        map-options
                        style="width: 286px"
                        outlined
                        :rules="[ val => val !== '' || ' 请选择采集周期']">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span><span>采集周期(ms):</span>
                  </label>
                </template>
              </q-select>

            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.number"
                       dense
                       emit-value
                       map-options
                       :rules="[
                       val => val !== '' || '请输入采集间隔']"
                       style="width: 286px"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>采集间隔:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="col"></div>
          </div>

        </div>
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline
                 label="取消"
                 color="primary"
                 class="q-mr-md"
                 type="reset" />
          <q-btn unelevated
                 label="确认"
                 v-throttle
                 color="primary"
                 type="submit" />
        </div>
      </q-form>
    </basic-dialog>
  </div>
</template>

<script>
import BasicDialogMixin from 'src/components/common/basic-dialog/src/basic-dialog-mixin'

export default {
  name: 'network-port-config',
  mixins: [BasicDialogMixin],
  computed: {
  },
  data () {
    return {
      form: {
        address: '',
        volatility: '',
        dataBit: '',
        stopBit: '',
        checkBit: '',
        collectionCycle: ''
      },
      // 波动率
      volatilityOptions: [],
      // 数据位长度
      dataBitOptions: [],
      // 停止位长度
      stopBitOptions: [],
      // 校验位长度
      checkBitSOptions: [],
      // 采集周期
      collectionCycleOptions: []
    }
  },
  mounted () {
  },
  methods: {
    // 提交表单
    onSubmit () {
      this.submitData()
    },
    // 保存数据
    submitData () {
    }
  }
}
</script>

<style scoped lang="stylus">
  .label-width
    width 120px
</style>
